/**
 * 创元汇 - WebName
 * https://menger.me
 * @大梦
 */

import React, {Component} from 'react'
import {
    Text,
    View,
    Image,
    TextInput,
    ScrollView,
    StyleSheet,
    TouchableOpacity,
    StatusBar,
    WebView,
} from 'react-native'

import NetRequest from '../../utils/utilsRequest'
import ServicesApi from '../../constants/ServicesApi'
import GlobalStyles from '../../constants/GlobalStyles'
import NavigationBar from '../../components/common/NavigationBar'
import UtilsView from '../../utils/utilsView'
import { toastShort, toastLong, consoleLog } from '../../utils/utilsToast'
import AlertManager from '../../components/common/AlertManager'
import {Overlay, Label, Button} from 'teaset';
export default class Jijin extends Component {

    constructor(props) {
        super(props);
        const { params } = this.props.navigation.state;
        this.state =  {
            fund_id: params.fund_id,
            fund_name: params.fund_name,
            clear_money_total: '',
            money_total: '',
            next_profit_month: '',
            next_open_month: '',
            datum_rate: '',
            confirm_day: '',
            zaitu_money: '',
            settled_money_total: '',
            is_collection: '',
            is_return: 2,
            is_return_url: [],
            fundDetail: {},
            founding_time: '',
            record_time: '',
            invest_limit: '',
            leave_limit: '',
        }
        // this.netRequest = new NetRequest();
    }

    componentDidMount(){
        this.willFocus = this.props.navigation.addListener('willFocus', (payload) => {
            this.getFundDetail();
        })
    }

    componentWillUnmount(){
        // console.log(global.user)
        this.willFocus.remove();
        
    }

    onBack = () => {
        this.props.navigation.state.params.onCallBack();
        this.props.navigation.goBack();
    }

    updateState= (state) => {
        if (!this) { return };
        this.setState(state);
    }

    loadNetData = () => {
        
    }

    getFundDetail = () => {
        let url = ServicesApi.get_fund_detaile;
        let data = {
            fund_id: this.state.fund_id,
            member_id: global.user.userData.id,
            token: global.user.userData.token,
        }
        Services.post(url, data, true)
            .then( result => {
                if (result && result.code == StatusCode.SUCCESS_CODE) {
                    console.log(result);
                    this.updateState({
                        clear_money_total: result.data.clear_money_total,
                        money_total: result.data.money_total,
                        next_profit_month: result.data.next_profit_month,
                        next_open_month: result.data.next_open_month,
                        datum_rate: result.data.datum_rate,
                        confirm_day: result.data.confirm_day,
                        zaitu_money: result.data.zaitu_money,
                        settled_money_total: result.data.settled_money_total,
                        datum_rate: result.data.datum_rate,
                        buy_end_day: result.data.buy_end_day,
                        buy_end_money: result.data.buy_end_money,
                        time_limit: result.data.time_limit,
                        start_buy_money: result.data.start_buy_money,
                        end_people: result.data.end_people,
                        fund_name: result.data.fund_name,
                        is_collection: result.data.is_collection,
                        is_return: result.data.is_return,
                        is_return_url: result.data.is_return_url,
                        fundDetail: result.data,
                        founding_time: result.data.founding_time,
                        record_time: result.data.record_time,
                        invest_limit: result.data.invest_limit,
                        leave_limit: result.data.leave_limit,
                    })
                    if(result.data.is_return == 0){
                        // 没有做回访确认
                        const params = {
                            title: '温馨提示',
                            detail: '尊敬的会员，系统检测到您未签署《回访确认书》，点击“继续”进行签署',
                            actions: [
                                { title: '暂不', titleStyle: {  }, actionStyle: {  }, onPress: () => { 
                                    
                                } },
                                { title: '继续', onPress: () => { 
                                    this.onPushNavigator('Huifangquerenshu');
                                } }
                            ]
                        }
                        AlertManager.show(params)
                    }
                }else{
                    toastLong(result.msg);
                }
            })
            .catch( error => {
                toastShort('服务器请求失败，请稍后重试！');
            })
    }

    onPushNavigator = (compent, num) => {
        const { navigate } = this.props.navigation;
        navigate( compent , {
            fund_id: this.state.fund_id,
            title: this.state.fund_name,
            money_total: this.state.money_total,
            next_open_month: this.state.next_open_month,
            datum_rate: this.state.datum_rate,
            buy_end_day: this.state.buy_end_day,
            buy_end_money: this.state.buy_end_money,
            time_limit: this.state.time_limit,
            start_buy_money: this.state.start_buy_money,
            end_people: this.state.end_people,
            is_collection: this.state.is_collection,
            activeIndex: num,
            onCallBack:()=>{
                console.log('1');
            }
        })
    }

    toWebview = (title, link, compent) => {
        const { navigate } = this.props.navigation;
        navigate(compent, {
            title: title,
            link: link,
        })
    }

    render(){
        let navigationBar = {
            backgroundColor: '#fff',
            borderBottomColor: '#f2f2f2',
            borderBottomWidth: 1
        }
        let {fundDetail} = this.state;
        return (
            <View style={styles.container}>
                <NavigationBar
                    title = {this.state.fund_name}
                    style = {navigationBar}
                    titleStyle = {{color: '#333333'}}
                    leftButton = {UtilsView.getLeftBlackButton(() => this.onBack())}
                    rightButton = {UtilsView.getRightKefuBlackButton(() => this.onPushNavigator('Kefu'))}
                />
                <StatusBar
                    animated = {true}
                    hidden = {false}
                    backgroundColor = {'transparent'}
                    translucent = {true}
                    barStyle = {'dark-content'}
                />
                <ScrollView>
                    <View style={[GlobalStyles.userlist]}>
                        <View style={GlobalStyles.userlistright}>
                            <Text style={[GlobalStyles.userlisttext]}>业绩比较基准</Text>
                            <Text style={[styles.userlistRightText, styles.right0]}>{this.state.datum_rate}</Text>
                        </View>
                    </View>
                    <View style={[GlobalStyles.userlist]}>
                        <View style={GlobalStyles.userlistright}>
                            <Text style={[GlobalStyles.userlisttext]}>首次投资日期</Text>
                            <Text style={[styles.userlistRightText, styles.right0]}>{this.state.confirm_day}</Text>
                        </View>
                    </View>
                    <View style={[GlobalStyles.userlist]}>
                        <View style={GlobalStyles.userlistright}>
                            <Text style={[GlobalStyles.userlisttext]}>当前可用份额</Text>
                            <Text style={[styles.userlistRightText, styles.right0]}>{this.state.money_total}</Text>
                        </View>
                    </View>
                    <View style={[GlobalStyles.userlist]}>
                        <View style={GlobalStyles.userlistright}>
                            <Text style={[GlobalStyles.userlisttext]}>待确认份额</Text>
                            <Text style={[styles.userlistRightText, styles.right0]}>{this.state.zaitu_money}</Text>
                        </View>
                    </View>
                    <View style={[GlobalStyles.userlist]}>
                        <View style={GlobalStyles.userlistright}>
                            <Text style={[GlobalStyles.userlisttext]}>总收益</Text>
                            <Text style={[styles.userlistRightText, styles.right0]}>{this.state.settled_money_total}</Text>
                        </View>
                    </View>
                    <View style={[GlobalStyles.userlist]}>
                        <View style={GlobalStyles.userlistright}>
                            <Text style={[GlobalStyles.userlisttext]}>基金备案日</Text>
                            <Text style={[styles.userlistRightText, styles.right0]}>{this.state.record_time}</Text>
                        </View>
                    </View>
                    <View style={[GlobalStyles.userlist]}>
                        <View style={GlobalStyles.userlistright}>
                            <Text style={[GlobalStyles.userlisttext]}>基金成立日</Text>
                            <Text style={[styles.userlistRightText, styles.right0]}>{this.state.founding_time}</Text>
                        </View>
                    </View>
                    <View style={[GlobalStyles.userlist]}>
                        <View style={GlobalStyles.userlistright}>
                            <Text style={[GlobalStyles.userlisttext]}>基金投资期</Text>
                            <Text style={[styles.userlistRightText, styles.right0]}>{this.state.invest_limit}</Text>
                        </View>
                    </View>
                    <View style={[GlobalStyles.userlist]}>
                        <View style={GlobalStyles.userlistright}>
                            <Text style={[GlobalStyles.userlisttext]}>基金退出期</Text>
                            <Text style={[styles.userlistRightText, styles.right0]}>{this.state.leave_limit}</Text>
                        </View>
                    </View>
                    {/* <View style={[GlobalStyles.userlist]}>
                        <View style={GlobalStyles.userlistright}>
                            <Text style={[GlobalStyles.userlisttext]}>下一赎回开放月份</Text>
                            <Text style={[styles.userlistRightText, styles.right0]}>{this.state.next_open_month}</Text>
                        </View>
                    </View>
                    <View style={[GlobalStyles.userlist]}>
                        <View style={GlobalStyles.userlistright}>
                            <Text style={[GlobalStyles.userlisttext]}>下一结算月份</Text>
                            <Text style={[styles.userlistRightText, styles.right0]}>{this.state.next_profit_month}</Text>
                        </View>
                    </View> */}
                    <TouchableOpacity onPress={() => {this.onPushNavigator('Leijishouyi')}} style={[GlobalStyles.userlist]}>
                        <View style={GlobalStyles.userlistright}>
                            <Text style={[GlobalStyles.userlisttext]}>已结算收益</Text>
                            <Text style={styles.userlistRightText}>{this.state.clear_money_total}</Text>
                            <Image source={require('../../assets/images/icons/icon_user_arrow.png')} style={GlobalStyles.userlistmore} />
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => this.onPushNavigator('JijinGonggao', 3)} style={[GlobalStyles.userlist]}>
                        <View style={GlobalStyles.userlistright}>
                            <Text style={[GlobalStyles.userlisttext]}>基金公告</Text>
                            <Image source={require('../../assets/images/icons/icon_user_arrow.png')} style={GlobalStyles.userlistmore} />
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={()=>{this.onPushNavigator('ChengnuoquerenshuJijin')}} style={[GlobalStyles.userlist]}>
                        <View style={GlobalStyles.userlistright}>
                            <Text style={[GlobalStyles.userlisttext]}>承诺确认书</Text>
                            <Image source={require('../../assets/images/icons/icon_user_arrow.png')} style={GlobalStyles.userlistmore} />
                        </View>
                    </TouchableOpacity>

                    {this.state.is_return_url ?
                    <TouchableOpacity onPress={() => {this.toWebview('回访确认书', this.state.is_return_url, 'ImagesWebDetail');}} style={[GlobalStyles.userlist, GlobalStyles.hide]}>
                        <View style={GlobalStyles.userlistright}>
                            <Text style={[GlobalStyles.userlisttext]}>回访确认书</Text>
                            <Image source={require('../../assets/images/icons/icon_user_arrow.png')} style={GlobalStyles.userlistmore} />
                        </View>
                    </TouchableOpacity> : null }
                    {fundDetail.bank_info && <View style={styles.accountInfoWrap}>
                        <Text style={styles.accountInfoTips}>{fundDetail.desc}</Text>
                        <Text style={styles.accountInfoItem}>银行户名：{fundDetail.bank_info.bank_title}</Text>
                        <Text style={styles.accountInfoItem}>开户行：{fundDetail.bank_info.bank_name}</Text>
                        <Text style={styles.accountInfoItem}>银行账号：{fundDetail.bank_info.bank_num}</Text>
                    </View>}
                    <TouchableOpacity onPress={() => {this.onPushNavigator('Order')}} style={GlobalStyles.submit}>
                        <Text style={GlobalStyles.btna}>订单列表</Text>
                    </TouchableOpacity>                
                    <TouchableOpacity onPress={() => {this.onPushNavigator('FundDetail')}} style={[GlobalStyles.submit, {marginTop: 0}]}>
                        <Text style={GlobalStyles.btna}>认申购</Text>
                    </TouchableOpacity>            
                    <TouchableOpacity onPress={() => {this.onPushNavigator('Shuhui')}} style={[GlobalStyles.submit, {marginTop: 0}]}>
                        <Text style={GlobalStyles.btna}>赎回</Text>
                    </TouchableOpacity>
                    {/* <TouchableOpacity onPress={() => {this.onPushNavigator('Zhuanrang')}} style={[GlobalStyles.submit, {marginTop: 0}]}>
                        <Text style={GlobalStyles.btna}>转让</Text>
                    </TouchableOpacity> */}
                </ScrollView>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
    },
    webContainer: {
        width: GlobalStyles.width,
        height: GlobalStyles.height
    },
    userlistRightText: {
        position: 'absolute',
        right: 20,
        color: GlobalStyles.themeColor,
    },
    right0: {
        right: 0
    },
    botBar: {
        height: 54,
        backgroundColor: '#fff',
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        borderTopColor: '#ececec',
        borderTopWidth: 1,

    },
    botLeft: {
        flex: 1,
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center'
    },
    botLeftIco: {
        height: 24,

    },
    botLeftText: {
        fontSize: 13,
        color: '#666',
        height: 20,
        lineHeight: 20,
    },
    botRight: {
        flex: 2.5,
        backgroundColor: GlobalStyles.themeColor,
        height: 54,
        justifyContent: 'center',
        alignItems: 'center',

    },
    botRightText: {
        color: '#fff',
        fontSize: 18,
        fontWeight: 'bold'
    },

    accountInfoWrap: {
        marginTop: 10,
        paddingVertical: 10,
        paddingHorizontal: 15,
    },
    accountInfoTips: {
        fontSize: 14,
        color: '#666',
        lineHeight: 20,
    },
    accountInfoItem: {
        fontSize: 14,
        lineHeight: 20,
        color: '#b88950',
        fontWeight: '800',
    },
});
